<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-if判断</title>
	</head>
	<body>
		
		
		<div id="app">
			<h2>v-if=true 时包含的内容才会显示</h2>
			<div v-if="true">
				{{name}}	
			</div>
			<div v-if="false">
				{{name}}	
			</div>
			<hr />
		
			<h2>v-if v-else判断  2个标签必须连着写</h2>
			<div v-if="isShow">
				展现v-if数据
			</div>
			<div v-else>
				展现v-else数据
			</div>
			<hr />
			
			<h2>v-if v-else-if  v-else判断</h2>
			<p>当分数>=90分优秀, >=80良好, >=70中等  >=60分及格</p>
			<p v-if="scope>=90">优秀</p>
			<p v-else-if="scope>=80">良好</p>
			<p v-else-if="scope>=70">中等</p>
			<p v-else>及格</p>
			<hr />
			
			<h2>通过计算属性的方式计算</h2>
			{{computedScope}}
		</div>
		
		
		
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: { 
					name : "if 判断测试",
					isShow	: false,
					scope : 70 
				},
				computed: {
					//通过计算属性的方式实现
					computedScope(){
						let message = "不及格"
						if(this.scope>=90){
							message = "优秀";
						}else if(this.scope>=80){
							message = "良好";
						}else{
							message = "及格"
						}
						return message;
					}
				}
			});
		</script>
	</body>
</html>
